<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="resource/css/main.css">
		<script type="text/javascript" src="resource/js/jquery.min.js"></script>
		<script type="text/javascript" src="resource/js/highcharts.js"></script>
		<script type="text/javascript">
			//配置文件地址
			var confFile = "resource/conf/testConf.json";

			//参加测试用户名
			var userName = "";

			//当前问题Index
			var questionIndex = 0;

			//题目总数量
			var questionCount = 0;

			//回答正确问题数量
			var correctQuestionCount = 0;

			//测试开始时间
			var beginTime;

			//是否为最后一道问题
			var isLast = false;

			//当前问题正确答案
			var currentCorrect;

			//保存用户所选答案
			var answers = new Array();

			//测试名称
			var testName = "";

			//是否保存测试结果
			var isSaveResult = false;
			//测试结果路径
			var resultSaveFile = "";

			//从配置文件中获得测试相关信息，并进行相关显示
			function getTestInfo() {
				$.getJSON(confFile, function(data) {
					testName = data.testName;
					document.title = data.testName;
					isSaveResult = data.isSaveResult;
					resultSaveFile = data.resultSaveFile;
					questionCount = data.questions.length;
					$("#testName").html(data.testName);
				});
			}

			//开始测试——隐藏标题，显示问题，记录开始时间
			function startTest() {
				userName = $("#userName").attr("value");
				if($.trim(userName) == "") {
					$("#info").html("请输入用户名");
					;
					return;
				}
				$("#userName").attr("value", "");
				questionIndex = 0;
				$(".index").hide();
				$(".question").show();
				beginTime = new Date();
				getQuestion();
			}

			//获取问题，选项，答案
			function getQuestion() {
				$.getJSON(confFile, function(data) {
					$("#questionIndex").html(data.questions[questionIndex].id);
					$("#question").html(data.questions[questionIndex].question);
					currentCorrect = data.questions[questionIndex].correct;
					var optionCount = data.questions[questionIndex].options.length;
					var perCounts = parseInt(data.questions[questionIndex].perOptions);
					var options = "";

					$.each(data.questions[questionIndex].options, function(i, n) {
						var option = "<td><input type='radio' name='currentOption' name='question'" + questionIndex + "'" + " value='" + n.id + "'/>" + n.id + "    " + n.content + "</td>";
						//
						if(i == 0 || i % perCounts == 0) {
							options += "<tr height='30'>";
						}
						//如果是最后一个选项，或者第n个，换行
						if((i + 1) % perCounts == 0 || i == optionCount) {
							options += option + "</tr>";
						} else {
							options += option;
						}
					});
					$("#options").append(options);
				});
				$("input:[name=currentOption]:radio:checked").val("");
				$("#nextInfo").html("");
				if(questionIndex == questionCount - 1) {
					isLast = true;
					$("#getNextBut").attr("value", "完成");
				} else {
					$("#getNextBut").attr("value", "下一题");
				}
			}

			function getNext() {
				if(!checkAnswer()) {
					return;
				}
				questionIndex++;
				$("#options").html("");
				//最后，保存到文件
				if(isLast) {
					finishTest();
				}
				//不是最后，获取下一题
				else {
					getQuestion();
				}
			}

			//检验用户答案，并保存
			function checkAnswer() {
				var length = $("input:[name=currentOption]:radio:checked").length;
				if(length == 0) {
					$("#nextInfo").html("请选择答案");
					return false;
				}
				selected = $("input:[name=currentOption]:radio:checked").val();
				answers[questionIndex] = selected;
				if(currentCorrect == selected) {
					correctQuestionCount++;
				}
				return true;
			}

			function finishTest() {
				$(".question").hide();
				$(".finish").show();
				showResult();
				if(isSaveResult) {
					saveResult();
				}
				showResultChart();
			}

			function showResult() {
				$("#user").html(userName);
				$("#totalCount").html(questionCount);
				$("#correctAnswer").html(correctQuestionCount);
				$("#startTime").html(beginTime.toLocaleString());
				$("#endTime").html(new Date().toLocaleString());
			}

			function saveResult() {
				var fso = new ActiveXObject("Scripting.FileSystemObject");
				var f = fso.OpenTextFile(resultSaveFile, 8, true);
				var result = "User:" + userName + ",|correctAnswer:" + correctQuestionCount + "|answers:" + answers + "|startTime:" + beginTime.toLocaleString() + "|endTime:" + new Date().toLocaleString();
				f.WriteLine(result);
				f.WriteBlankLines(1);
			}

			//获取测试名称，隐藏问题区
			$(document).ready(function() {
				getTestInfo();
				$(".question").hide();
				$(".finish").hide();
			});
			//显示结果Chart
			function showResultChart() {
				var chart = new Highcharts.Chart({
					chart : {
						renderTo : 'container',
						plotBackgroundColor : null,
						plotBorderWidth : null,
						plotShadow : false
					},
					title : {
						text : testName
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.point.name + '</b>: ' + this.y;
						}
					},
					plotOptions : {
						pie : {
							allowPointSelect : true,
							cursor : 'pointer',
							dataLabels : {
								enabled : true,
								color : '#000000',
								connectorColor : '#000000',
								formatter : function() {
									return '<b>' + this.point.name + '</b>: ' + this.y;
								}
							}
						}
					},
					series : [{
						type : 'pie',
						name : 'Browser share',
						data : [['正确', correctQuestionCount], ['错误', questionCount - correctQuestionCount]]
					}]
				});
			}
		</script>
		<title></title>
	</head>
	<body>
		<table width="95%" height="95%" align="center" summary="MainContent">
			<tr class="index">
				<td><div id="testName"></div><div id="nameInput"></div>
				<div class="nextPage">
					<span id="info" class="info"></span>
					姓名：
					<input type="input" name="userName" id="userName" maxlength="20"/>
					<input type="button" class="beginBut" value="开始" onclick="startTest()" />
				</div></td>
			</tr>
			<tr class="question">
				<td>
				<table summary="questionDetail">
					<tr id="questionContent">
						<td width="5%" id="questionIndex"></td>
						<td width="90%" id="question"></td>
					</tr>
					<tr>
						<td ></td>
						<td><table id="options" summary="options Detail"></table></td>
					</tr>
					<tr class="nextDiv">
						<td colspan="10" align="right"><span id="nextInfo" class="info"></span>
						<input type="button" id="getNextBut" class="nextBut" onclick="getNext()" align="right" />
						</td>
					</tr>
				</table></td>
			</tr>
			<tr class="finish">
				<td>
				<div>
					<span id="user"></span>，一共 <span id="totalCount"></span>道测试题，你答对了 <span id="correctAnswer"></span>道。
				</div>
				<div>
					开始时间： <span id="startTime"></span>——
					结束时间： <span id="endTime"></span>
				</div><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div></td>
			</tr>
		</table>
	</body>
</html>
